/*
  存放公共的样式
*/
$primary-text-color: white;
$secondary-text-color: rgba(255, 255, 255, 0.8);
$primary-color: rgba(95, 120, 145, 0.90);
$secondary-color: #DEDEDE;


// 卡片背景色，按钮背景色
.bg-primary {
  background-color: $primary-color;
}

// 次要按钮背景色, 输入框背景色
.bg-secondary {
  background-color: $secondary-color;
}

// small: 4px 8px
// medium: 8px 16px
// normal: 24px 32px
// large: 32px 32px

.p-small {
  padding: 8px 16px;
}

// 顶部搜索栏取消按钮的padding
.p-medium {
  padding: 16px 32px;
}

// 卡片padding, 输入框padding
.p-normal {
  padding: 24px 32px;
}

.pv-medium {
  padding-top: 16px;
  padding-bottom: 16px;
}

.pv-medium {
  padding-top: 16px;
  padding-bottom: 16px;
}

.pv-normal {
  padding-top: 24px;
  padding-bottom: 24px;
}

.ph-medium {
  padding-left: 16px;
  padding-right: 16px;
}

.ph-normal {
  padding-left: 32px;
  padding-right: 32px;
}

.pl-medium {
  padding-left: 16px;
}

.mt-small {
  margin-top: 8px;
}

.mt-medium {
  margin-top: 16px;
}

.mt-normal {
  margin-top: 24px;
}

.mt-large {
  margin-top: 48px;
}

.pb-normal {
  padding-bottom: 24px;
}

// 卡片margin
.m-normal {
  margin: 24px 32px 0px 32px;
}

.ma-normal {
  margin: 24px 24px 0 24px;
}

// 主按钮的margin
.m-large {
  margin: 48px 32px;
}

.mt-medium {
  margin-top: 16px;
}

.ml-small {
  margin-left: 8px;
}

// flex布局元素之间的margin
.ml-medium {
  margin-left: 16px;
}

.ml-large {
  margin-left: 64px;
}

.mr-large {
  margin-right: 64px;
}

.mh-medium {
  margin-right: 16px;
  margin-left: 16px;
}

.mh-normal {
  margin-left: 32px;
  margin-right: 32px;
}

.mv-normal {
  margin-top: 24px;
  margin-bottom: 24px;
}

.border {
  border: 1px solid #f0f0f0;
}

.border-right {
  border-right: 2px solid #ffffff;
}

.border-top-50 {
  border-top: 2px solid rgba(255, 255, 255, 0.5);
}

.border-bottom-20 {
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}


// 卡片内部的圆角
.border-radius-small {
  border-radius: 8px;
}

// 卡片的圆角
.border-radius-medium {
  border-radius: 16px;
}

.border-radius-normal {
  border-radius: 32px;
}

// 主按钮/搜索框的圆角
.border-radius-large {
  border-radius: 64px;
}

// 横向排列，左对齐，垂直居中
.row-start-center {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.row-start-stretch {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
}

.row-aroud-center {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

// 横向排列，两边对齐，垂直居中
.row-between-center {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

// 纵向排列，上对齐，水平居中
.column-start-center {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.row-start-stretch-gap {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  align-items: stretch;
  gap: 16px;
}

// 纵向排列，上下两端对齐，左对齐
.column-between-start {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.flex-1 {
  flex: 1;
}

.flex-wrap {
  flex-wrap: wrap;
}

.text-primary-bold {
  color: $primary-text-color;
  font-size: 32px;
  font-weight: bold;
}

.text-primary {
  color: $primary-text-color;
  font-size: 32px;
}

.text-secondary {
  color: $secondary-text-color;
  font-size: 32px;
}

$succsess-text-color: #FFD600;
$fail-text-color: #00FF0A;
$normal-text-color: #FFFFFF;
$warning-text-color: #00FFC2;

.text-large-fail {
  color: $fail-text-color;
  font-size: 40px;
}

.text-large-succsess {
  color: $succsess-text-color;
  font-size: 40px;
}

.primary {
  color: $primary-text-color;
}

.success {
  color: $succsess-text-color !important;
}

.fail {
  color: $fail-text-color !important;
}

.normal {
  color: $normal-text-color !important;
}

.warning {
  color: $warning-text-color !important;
}

.secondary {
  color: $secondary-text-color;
}

.red {
  color: red;
}

.text-title {
  color: $primary-text-color;
  font-size: 32px;
  font-weight: bold;
}

.text-normal {
  color: $primary-text-color;
  font-size: 30px;
}

.text-small-primary {
  color: $primary-text-color;
  font-size: 24px;
}

.font-size-small {
  font-size: 24px;
}

.font-size-medium {
  font-size: 28px;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.pv-normal-mh-normal {
  padding-top: 24px;
  padding-bottom: 24px;
  margin-left: 32px;
  margin-right: 32px;
}

.vh-100 {
  height: 100vh;
}

.h-100 {
  height: 100%;
}

.w-100 {
  width: 100%;
}

.match-parent {
  width: 100%;
  height: 100%;
}

.image-48 {
  width: 48px;
  height: 48px;
}

.image-64 {
  width: 64px;
  height: 64px;
}

.image-128 {
  width: 128px;
  height: 128px;
}

.image-160 {
  width: 160px;
  height: 160px;
}

.overflow-hidden {
  overflow: hidden;
}

.position-relative {
  position: relative;
}